<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="commons/css::css">head</th:block>
</head>

<body class="flat-blue">
<div class="app-container">
    <div class="row content-container">
        <th:block th:include="commons/nav_head::nav">head</th:block>
        <th:block th:include="commons/side::side">side</th:block>

        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">

                        <div id="toolbar" class="btn-group">
                            <button id="btn_add" title="添加" type="button" class="btn btn-primary btn-sm" onclick="document.location.replace(ctx + '/material/category/save_page/0');">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            </button>

                            <button id="btn_delete" title="删除" type="button" style="margin-left: 4px" class="btn btn-sm btn-danger" onclick="batchDelete()">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </button>
                        </div>

                        <table id="dataTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<th:block th:include="commons/js::js">Javascript Libs</th:block>
<script type="text/javascript">

    $(function () {

        $("#dataTable").bootstrapTable({
            url: ctx + "/material/category/pageList", // 获取表格数据的url
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [10, 20, 30, 50], // 设置页面可以显示的数据条数
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码
            sidePagination: 'server', // 设置为服务器端分页
            // toolbar: '#toolbar', // 工具按钮用哪个容器
            // showRefresh: true,
            silent: true,
            uniqueId: "id",
            undefinedText: "-",
            contentType: "application/x-www-form-urlencoded",
            method: "post",
            queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    pageSize: params.limit, // 每页要显示的数据条数
                    offset: params.pageNumber, // 每页显示数据的开始行号
                    sort: params.sort, // 要排序的字段
                    sortOrder: params.order, // 排序规则
                    roleName: $("#searchRoleName").val()
                }
            },
            sortName: 'id', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            columns: [
                {
                    checkbox: true, // 显示一个勾选框
                    align: 'center', // 居中显示
                    valign: "middle"
                }, {
                    field: 'id', // 返回json数据中的name
                    title: '', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                },
                {
                    field: 'categoryName', // 返回json数据中的name
                    title: '名称', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                },{
                    field: 'imgUrl',
                    title: '图片',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value!= null && value.length > 0) {
                            return '<img style="width: 35px; height: 35px;" src="'+value+'"/>';
                        }
                        return "-";
                    }
                }, {
                    field: 'description', // 返回json数据中的name
                    title: '描述', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    width: 360,
                    formatter: function (value, row, index) {
                        if (value) {
                            if (value.length > 20) {
                                return value.substring(0, 20) + "...";
                            }
                            return value
                        }
                        return "-";
                    }
                }, {
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        var sb = new StringBuilder();
                        if (hasPermission("role_update")) {
                            sb.append('<button title="修改" class="btn btn-sm btn-info" onclick="update(' + row.id + ')"><span class="glyphicon glyphicon-pencil"></span></button>&nbsp;&nbsp;');
                        }
                        return sb.toString();
                    }
                }
            ],
            responseHandler: function (res) {
                return {
                    "rows": res.data.rows, // 具体每一个bean的列表
                    "total": res.data.total // 总共有多少条返回数据
                }
            }
        });
    });

    function initTable() {
        $("#dataTable").bootstrapTable("refresh");
    }

    function update(materialId) {
        document.location.replace(ctx + "/material/category/save_page/" + materialId);
    }

    function batchDelete() {
        // 获取选中值
        var selectedChboxs = $("#dataTable").bootstrapTable('getSelections');
        if (selectedChboxs == null || selectedChboxs.length < 1) {
            Alert("请选择要操作的项");
            return;
        }
        var ids = [];
        for (var i = 0; i < selectedChboxs.length; i++) {
            ids.push(selectedChboxs[i].id);
        }
        Confirm("删除分类后已关联的素材也会被删除，确认删除?", function () {
            $.post(ctx + "/material/category/batchDelete", {ids:ids.join(",")}, function (rtn) {
                if (rtn.code != 1) {
                    Alert("操作失败");
                    return;
                }
                Alert("操作成功", function () {
                    document.location.replace(ctx + '/material/category/manager');
                });
            });
        })
    }
</script>
</html>